<template>
  <div style="text-align: center">
    <span style="font-size: 20px">乡村劳动力分布信息</span>
    <baidu-map class="bm-view" ak='tQkYwG4oSbxkVV4fHlozuyKWNqESynxz' center="濮阳市南乐县" :scroll-wheel-zoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <div v-for="(item,key) in infoWindow" :key="key">
        <bm-marker  :position="item.position" :dragging="true" @click="lookDetail(item.position,item.content,item.title)">
        </bm-marker>
      </div>
      <bm-info-window :position="position" :show="show" @close="infoWindowClose" :title="title" @open="infoWindowOpen">
            <p v-html="content"></p>
          </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation'
import BmCityList from 'vue-baidu-map/components/controls/CityList'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  data () {
    return {
      show: false,
      position: '',
      content: '',
      title: '',
      infoWindow: [{
        position: { lng: 115.1249531400, lat: 36.0445506400 },
        title: '河南省濮阳市南乐县近德固乡留固店村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1401767600, lat: 36.0452595400 },
        title: '河南省濮阳市南乐县近德固乡赵家庄村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1312054600, lat: 36.0403922900 },
        title: '河南省濮阳市南乐县近德固乡齐庄村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1485011900, lat: 36.0575932300 },
        title: '河南省濮阳市南乐县近德固乡西吉七村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1627214800, lat: 36.1013214000 },
        title: '河南省濮阳市南乐县近德固乡佛善村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1764778500, lat: 36.0798734100 },
        title: '河南省濮阳市南乐县近德固乡杏园村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1546390500, lat: 36.0787872000 },
        title: '河南省濮阳市南乐县近德固乡李村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }, {
        position: { lng: 115.1200908100, lat: 36.0678448200 },
        title: '河南省濮阳市南乐县近德固乡跳堂村',
        content: '<span>劳动力总人数：</span><br/>' +
        '<span>年龄分布：20~30:;30~40:;40~50:;50~60:;</span><br/>' +
        '<span>工资分布：多数工资在五千到七千</span><br/>' +
        '<span>工作种类分布：多数为建筑业，其他分布有餐饮业、中介、教育等</span><br/>' +
        '<span>跨省跨地区流动情况：二分之一市内工作,三分之一跨市工作,六分之一跨省工作</span><br/>'
      }]
    }
  },
  components: {
    BaiduMap: BaiduMap,
    BmNavigation: BmNavigation,
    BmGeolocation: BmGeolocation,
    BmCityList: BmCityList,
    BmMarker: BmMarker,
    BmInfoWindow: BmInfoWindow
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    lookDetail (item, content, title) {
      this.position = item
      this.title = title
      this.content = content
      this.show = true
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 650px;
}
</style>
